<template>
  <div class="vue-container">
    <common-form
      ref="commonForm"
      :disabled="disabled"
      :options="options"
      @handlerClick="handlerClick"
      @advancedSearch="handlerQuery"
    >
      <template slot="advanced-content">
        <el-form ref="advancedForm" style="margin-top: 20px;" :model="queryForm" label-width="100px">
          <el-form-item label="登录浏览器">
            <el-input v-model="queryForm.browser" clearable />
          </el-form-item>
          <el-form-item label="操作系统">
            <el-input v-model="queryForm.os" clearable />
          </el-form-item>
          <el-form-item label="登录状态">
            <el-select v-model="queryForm.status" clearable style="width: 100%;" placeholder="请选择登录状态">
              <el-option
                v-for="(item, index) in statusList"
                :key="index"
                :label="item.label"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="登录时间">
            <el-date-picker
              v-model="queryForm.createTime"
              style="width: 100%;"
              type="datetimerange"
              placeholder="选择时间"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
        </el-form>
      </template>
    </common-form>
    <common-table
      :table-data="data"
      :columns="columns"
      :height="height"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :total="totalPage"
      :loading="loading"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleSelectionChange="handleSelectionChange"
    >
      <!-- 列表序号 -->
      <template #serialNumber="scope">
        <span>{{
          Number(scope.index + 1) + (queryForm.pageNum - 1) * queryForm.pageSize
        }}</span>
      </template>
      <!-- 登录状态 #SUCCESS：成功, FAIL：失败 -->
      <template #status="scope">
        <template v-for="(item, index) in statusList">
          <el-tag
            v-if="scope.row.status === item.code"
            :key="index"
            :type="scope.row.status === 'SUCCESS' ? 'success' : 'danger'"
          >{{ item.label }}</el-tag>
        </template>
      </template>
      <!-- 登录时间 -->
      <template #createTime="scope">
        {{ scope.row.createTime | formatTime }}
      </template>
    </common-table>
  </div>
</template>
<script>
import { mixin } from '@/views/pages/mixin'
export default {
  name: 'LoginLog',
  mixins: [mixin],
  data() {
    return {
      statusList: [], // 登录状态 #SUCCESS：成功, FAIL：失败数组
      // 表头数组
      columns: [
        {
          type: 'selection',
          width: '60'
        },
        {
          prop: 'number',
          label: '序号',
          width: '70',
          type: 'slot',
          slotType: 'serialNumber'
        },
        {
          prop: 'username',
          align: 'center',
          label: '登录用户账号'
        },
        {
          prop: 'ip',
          align: 'center',
          width: '150',
          label: 'IP地址'
        },
        {
          prop: 'browser',
          align: 'center',
          label: '登录浏览器'
        },
        {
          prop: 'os',
          align: 'center',
          label: '操作系统'
        },
        {
          prop: 'engine',
          align: 'center',
          label: '浏览器引擎'
        },
        {
          prop: 'addr',
          align: 'center',
          width: '200',
          label: '登录地址'
        },
        {
          prop: 'status',
          align: 'center',
          type: 'slot',
          slotType: 'status',
          label: '登录状态'
        },
        {
          prop: 'remarks',
          align: 'center',
          label: '备注'
        },
        {
          prop: 'createTime',
          align: 'center',
          type: 'slot',
          width: '180',
          slotType: 'createTime',
          label: '登录时间'
        }
      ],
      // 顶部表单按钮组
      options: [{
        type: 'button',
        icon: 'el-icon-refresh',
        handler: 'handlerRefresh',
        float: 'left',
        class: 'refreshBtn',
        text: '刷新'
      },
      {
        type: 'button',
        icon: 'el-icon-download',
        handler: 'handlerExport',
        permission: 'export',
        btnType: 'info',
        float: 'left',
        text: '导出'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerDels',
        class: 'deleteBtn',
        permission: 'batch:del',
        text: '删除',
        float: 'left'
      },
      {
        type: 'button',
        icon: 'el-icon-delete',
        handler: 'handlerClear',
        class: 'deleteBtn',
        permission: 'clear',
        text: '清空',
        float: 'left'
      },
      {
        type: 'button',
        handler: 'handlerAdvanced',
        class: 'refreshBtn',
        permission: 'page',
        advanced: true,
        float: 'right',
        text: '高级查询'
      },
      {
        type: 'button',
        handler: 'handlerReset',
        permission: 'page',
        float: 'right',
        class: 'infoBtn',
        text: '重置'
      },
      {
        type: 'button',
        handler: 'handlerQuery',
        permission: 'page',
        float: 'right',
        text: '查询',
        btnType: 'primary'
      },
      {
        type: 'search',
        handler: 'handlerQuery',
        permission: 'page',
        bindValue: '',
        float: 'right',
        label: 'keyword',
        placeholder: '输入关键字搜索'
      }
      ]
    }
  },
  async created() {
    // 通过全局方法取数据字典
    this.statusList = await this.getDictInfo('login_log_status')
  },
  methods: {
    // 清空操作日志
    handlerClear() {
      this.$confirm('此操作将清空所有登录日志, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.funs['clear']().then(res => {
          this.$message.success('清空成功')
          this.getList()
        })
      }).catch(() => {

      })
    }
  }
}
</script>
